<template>
  <a-modal
    v-model:open="modalVisible"
    :title="null"
    width="450px"
    :footer="null"
    :destroy-on-close="true"
    :closable="false"
    class="post-detail-modal phone-modal"
    :body-style="{
      padding: '20px',
      height: '750px',
      overflow: 'hidden',
      display: 'flex',
      justifyContent: 'center',
    }"
  >
    <div class="phone-frame">
      <div class="phone-notch"></div>
      <div class="phone-screen">
        <!-- 状态栏 -->
        <div class="status-bar">
          <span class="time">9:41</span>
          <div class="indicators">
            <span class="signal">● ● ●</span>
          </div>
        </div>

        <!-- 应用头部 -->
        <div class="app-header">
          <div class="header-left" @click="modalVisible = false">
            <ArrowLeftOutlined />
          </div>
          <div class="header-title">{{ getModalTitle() }}</div>
          <div class="header-right">
            <MoreOutlined />
          </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="phone-content">
          <!-- 帖子详情区域 -->
          <div v-if="sourceType === 'post'" class="post-section">
            <a-spin :spinning="detailLoading">
              <div v-if="sourceDetail" class="post-detail-phone">
                <!-- 1. 作者信息 -->
                <div class="post-header">
                  <img :src="sourceDetail.userAvatar || defaultAvatar" class="user-avatar" />
                  <div class="user-info">
                    <div class="username">
                      {{ sourceDetail.userNickName || '未知用户' }}
                      <span v-if="sourceDetail.isAnonymous === 1" class="anonymous-tag"
                        >匿名发布</span
                      >
                    </div>
                    <div class="post-meta">
                      <span class="time">{{ formatDateTime(sourceDetail.createTime) }}</span>
                      <span class="separator">·</span>
                      <span class="status" :class="getPostStatusClass(sourceDetail.postStatus)">
                        {{ getPostStatusText(sourceDetail.postStatus) }}
                      </span>
                      <span v-if="sourceDetail.isPinned === 1" class="separator">·</span>
                      <span v-if="sourceDetail.isPinned === 1" class="pinned">置顶</span>
                    </div>
                  </div>
                </div>

                <!-- 2. 帖子图片 -->
                <div
                  v-if="sourceDetail.postImages && sourceDetail.postImages.length > 0"
                  class="post-images"
                >
                  <a-carousel autoplay :dots="true" class="post-carousel">
                    <div
                      v-for="(image, index) in sourceDetail.postImages"
                      :key="index"
                      class="image-slide"
                    >
                      <a-image :src="image" :preview="{ src: image }" class="post-image" />
                    </div>
                  </a-carousel>
                </div>

                <!-- 3. 帖子标题 -->
                <div class="post-title">{{ sourceDetail.title }}</div>

                <!-- 4. 帖子内容 -->
                <div class="post-text">{{ sourceDetail.content }}</div>

                <!-- 5. 帖子话题标签 -->
                <div
                  v-if="sourceDetail.postTagList && sourceDetail.postTagList.length > 0"
                  class="post-tags"
                >
                  <span
                    v-for="tag in sourceDetail.postTagList"
                    :key="tag"
                    class="tag"
                    @click="handleTagClick(tag)"
                  >
                    #{{ tag }}
                  </span>
                </div>

                <!-- 6. 帖子操作 -->
                <div class="post-actions">
                  <div class="action-item">
                    <HeartOutlined class="action-icon" />
                    <span class="action-count">{{ sourceDetail.likeCount || 0 }}</span>
                  </div>
                  <div class="action-item">
                    <EyeOutlined class="action-icon" />
                    <span class="action-count">{{ sourceDetail.viewCount || 0 }}</span>
                  </div>
                  <div class="action-item">
                    <MessageOutlined class="action-icon" />
                    <span class="action-count">{{ sourceDetail.commentCount || 0 }}</span>
                  </div>
                  <div class="action-item">
                    <ShareAltOutlined class="action-icon" />
                    <span class="action-text">分享</span>
                  </div>
                </div>
              </div>
            </a-spin>
          </div>

          <!-- 闲置物品详情区域 -->
          <div v-else-if="sourceType === 'idle'" class="idle-section">
            <a-result title="闲置物品详情" sub-title="该功能暂未开发，敬请期待" status="info" />
          </div>

          <!-- 7. 评论区域 -->
          <div class="comments-section-phone">
            <div class="comments-divider"></div>
            <div class="comments-header-phone">
              <span class="comments-title">💬 评论 {{ commentData.totalCount || 0 }}</span>
            </div>

            <div class="comments-list-phone" @scroll="handleScroll">
              <a-spin :spinning="commentsLoading">
                <div v-if="commentData.rootComments && commentData.rootComments.length > 0">
                  <div
                    v-for="comment in commentData.rootComments"
                    :key="comment.id"
                    class="comment-item-phone"
                  >
                    <!-- 一级评论 -->
                    <div class="main-comment-phone">
                      <img :src="getUserAvatar(comment)" class="comment-avatar" />
                      <div class="comment-content-phone">
                        <div class="comment-header-phone">
                          <span class="comment-username">
                            {{ getUserName(comment) }}
                            <span v-if="isAuthor(comment)" class="author-tag">作者</span>
                          </span>
                          <span class="comment-time-phone">{{
                            formatCommentTime(comment.createTime)
                          }}</span>
                        </div>
                        <div class="comment-text-phone">{{ comment.content }}</div>

                        <!-- 评论图片 -->
                        <div
                          v-if="comment.commentImages && comment.commentImages.length > 0"
                          class="comment-images-phone"
                        >
                          <a-image
                            v-for="(image, index) in comment.commentImages.slice(0, 3)"
                            :key="index"
                            :src="image"
                            :width="60"
                            :height="60"
                            :preview="{ src: image }"
                            class="comment-image-small"
                          />
                        </div>

                        <div class="comment-actions-phone">
                          <span class="like-action" :class="{ liked: comment.liked }">
                            <HeartOutlined />
                            {{ comment.likeCount || 0 }}
                          </span>

                          <!-- 回复按钮 -->
                          <a-button
                            v-if="comment.replies && comment.replies.length > 0"
                            type="link"
                            size="small"
                            @click="toggleReplies(comment.id)"
                            class="reply-btn-phone"
                          >
                            {{
                              expandedComments.has(comment.id)
                                ? '收起回复'
                                : `${comment.replies.length}条回复`
                            }}
                          </a-button>
                        </div>
                      </div>
                    </div>

                    <!-- 二级评论 -->
                    <div
                      v-if="
                        comment.replies &&
                        comment.replies.length > 0 &&
                        expandedComments.has(comment.id)
                      "
                      class="replies-phone"
                    >
                      <div
                        v-for="reply in comment.replies"
                        :key="reply.id"
                        class="reply-item-phone"
                      >
                        <img :src="getUserAvatar(reply)" class="reply-avatar" />
                        <div class="reply-content-phone">
                          <div class="reply-header-phone">
                            <span class="reply-username">
                              {{ getUserName(reply) }}
                              <span v-if="isAuthor(reply)" class="author-tag">作者</span>
                            </span>
                            <span class="reply-time-phone">{{
                              formatCommentTime(reply.createTime)
                            }}</span>
                          </div>
                          <div class="reply-text-phone">
                            <span v-if="reply.replyTargetUser" class="reply-target">
                              回复
                              <span class="target-username"
                                >@{{ reply.replyTargetUser.nickName }}</span
                              >： </span
                            >{{ reply.content }}
                          </div>

                          <!-- 回复图片 -->
                          <div
                            v-if="reply.commentImages && reply.commentImages.length > 0"
                            class="comment-images-phone"
                          >
                            <a-image
                              v-for="(image, index) in reply.commentImages.slice(0, 3)"
                              :key="index"
                              :src="image"
                              :width="60"
                              :height="60"
                              :preview="{ src: image }"
                              class="comment-image-small"
                            />
                          </div>

                          <div class="reply-actions-phone">
                            <span class="like-action" :class="{ liked: reply.liked }">
                              <HeartOutlined />
                              {{ reply.likeCount || 0 }}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div v-else-if="!commentsLoading" class="empty-comments-phone">
                  <div class="empty-text">还没有评论，来说两句吧~</div>
                </div>
              </a-spin>

              <!-- 加载更多 -->
              <div
                v-if="hasMoreComments && commentData.rootComments.length > 0"
                class="load-more-phone"
              >
                <a-button @click="loadMoreComments" :loading="loadingMore" block type="text">
                  加载更多评论
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import {
  EyeOutlined,
  LikeOutlined,
  MessageOutlined,
  DownOutlined,
  UpOutlined,
  ArrowLeftOutlined,
  MoreOutlined,
  HeartOutlined,
  ShareAltOutlined,
} from '@ant-design/icons-vue'
import { message, Carousel } from 'ant-design-vue'
import dayjs from 'dayjs'
import type { Post, CommentTree, CommentTreeNode } from '../../../../types'
import { PostService } from '../../../../api/post'
import { CommentService } from '../../../../api/comment'

interface Props {
  visible: boolean
  sourceType: string
  sourceId: number
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 默认头像
const defaultAvatar =
  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'

// 响应式状态
const modalVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
})

// 数据状态
const sourceDetail = ref<Post | null>(null)
const commentData = ref<CommentResponse>({
  totalCount: 0,
  rootComments: [],
})

// 加载状态
const detailLoading = ref(false)
const commentsLoading = ref(false)
const loadingMore = ref(false)

// 分页状态
const currentPage = ref(1)
const hasMoreComments = ref(true)

// 展开的评论
const expandedComments = ref<Set<number>>(new Set())

// DOM引用
const commentsContainer = ref<HTMLElement>()

// 获取模态框标题
const getModalTitle = () => {
  if (props.sourceType === 'post') {
    return '帖子详情'
  } else if (props.sourceType === 'idle') {
    return '闲置物品详情'
  }
  return '详情'
}

// 获取帖子状态颜色
const getPostStatusColor = (status: string) => {
  switch (status) {
    case 'published':
      return 'green'
    case 'pending':
      return 'orange'
    case 'hidden':
      return 'red'
    default:
      return 'default'
  }
}

// 获取帖子状态类名
const getPostStatusClass = (status: string) => {
  switch (status) {
    case 'published':
      return 'status-published'
    case 'pending':
      return 'status-pending'
    case 'hidden':
      return 'status-hidden'
    default:
      return 'status-default'
  }
}

// 获取帖子状态文本
const getPostStatusText = (status: string) => {
  switch (status) {
    case 'published':
      return '已发布'
    case 'pending':
      return '审核中'
    case 'hidden':
      return '已隐藏'
    default:
      return '未知'
  }
}

// 获取用户头像
const getUserAvatar = (comment: CommentItem | ReplyItem) => {
  return comment.userInfo?.avatar || defaultAvatar
}

// 获取用户名
const getUserName = (comment: CommentItem | ReplyItem) => {
  return comment.userInfo?.nickName || '未知用户'
}

// 格式化评论时间
const formatCommentTime = (dateTime: string | number) => {
  if (!dateTime) return '-'
  // 如果是时间戳，转换为Date对象
  const date = typeof dateTime === 'number' ? new Date(dateTime) : new Date(dateTime)
  return dayjs(date).format('MM-DD HH:mm')
}

// 格式化时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return dayjs(dateTime).format('MM-DD HH:mm')
}

// 获取来源详情
const fetchSourceDetail = async () => {
  if (props.sourceType === 'post') {
    try {
      detailLoading.value = true
      sourceDetail.value = await PostService.getPostDetail(props.sourceId)
    } catch (error) {
      console.error('获取帖子详情失败:', error)
      message.error('获取帖子详情失败')
    } finally {
      detailLoading.value = false
    }
  }
  // idle类型暂时不处理
}

// 获取评论列表
const fetchComments = async (page = 1) => {
  try {
    if (page === 1) {
      commentsLoading.value = true
    } else {
      loadingMore.value = true
    }

    const result = await CommentService.getCommentTree({
      sourceType: props.sourceType,
      sourceId: props.sourceId,
      page,
      pageSize: 20,
    })

    if (page === 1) {
      commentData.value = result
      expandedComments.value.clear()
    } else {
      // 追加更多评论
      commentData.value.rootComments.push(...result.rootComments)
    }

    // 检查是否还有更多
    hasMoreComments.value = result.rootComments.length === 20
  } catch (error) {
    console.error('获取评论失败:', error)
    message.error('获取评论失败')
  } finally {
    commentsLoading.value = false
    loadingMore.value = false
  }
}

// 加载更多评论
const loadMoreComments = async () => {
  currentPage.value++
  await fetchComments(currentPage.value)
}

// 切换回复展开状态
const toggleReplies = (commentId: number) => {
  if (expandedComments.value.has(commentId)) {
    expandedComments.value.delete(commentId)
  } else {
    expandedComments.value.add(commentId)
  }
}

// 滚动加载监听
const handleScroll = () => {
  if (!commentsContainer.value || !hasMoreComments.value || loadingMore.value) return

  const { scrollTop, scrollHeight, clientHeight } = commentsContainer.value
  const threshold = 100 // 距离底部100px时触发加载

  if (scrollTop + clientHeight >= scrollHeight - threshold) {
    loadMoreComments()
  }
}

// 判断是否为作者
const isAuthor = (comment: CommentItem | ReplyItem) => {
  return sourceDetail.value && comment.userInfo?.id === sourceDetail.value.userId
}

// 处理话题点击
const handleTagClick = (tag: string) => {
  message.info(`点击了话题：#${tag}`)
}

// 监听visible变化，重新加载数据
watch(
  () => props.visible,
  (newVisible) => {
    if (newVisible && props.sourceId) {
      // 重置状态
      currentPage.value = 1
      hasMoreComments.value = true

      // 加载数据
      fetchSourceDetail()
      fetchComments()
    }
  },
  { immediate: true }
)

// 更新类型定义
interface UserInfo {
  id: number
  nickName: string
  avatar: string
  [key: string]: any
}

interface ReplyItem {
  id: number
  userId: number
  content: string
  createTime: number
  liked: boolean
  isCurrentUser: boolean
  userInfo: UserInfo
  replyTargetUser?: UserInfo | null
  commentImages?: string[] | null
  likeCount?: number
}

interface CommentItem {
  id: number
  userId: number
  content: string
  createTime: string
  likeCount: number
  replyCount: number
  isAnonymous: number
  liked: boolean
  isCurrentUser: boolean
  userInfo: UserInfo
  commentImages?: string[] | null
  replies?: ReplyItem[]
}

interface CommentResponse {
  totalCount: number
  rootComments: CommentItem[]
}
</script>

<style scoped lang="scss">
.post-detail-modal.phone-modal {
  .ant-modal-content {
    border-radius: 16px;
    overflow: hidden;
  }

  .ant-modal-body {
    padding: 0 !important;
  }
}

.phone-frame {
  width: 390px;
  height: 710px;
  background: #000;
  border-radius: 40px;
  padding: 8px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
}

.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 26px;
  background: #000;
  border-radius: 0 0 20px 20px;
  z-index: 2;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;

  .time {
    color: #000;
  }

  .indicators {
    display: flex;
    gap: 4px;
    font-size: 12px;
  }
}

.app-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;

  .header-title {
    font-size: 17px;
    font-weight: 600;
    color: #000;
  }

  .header-left,
  .header-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007aff;
    font-size: 17px;
    cursor: pointer;
  }
}

.phone-content {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
}

.post-section {
  background: white;

  .post-detail-phone {
    .post-header {
      display: flex;
      align-items: center;
      padding: 18px;
      background: white;

      .user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 14px;
        object-fit: cover;
      }

      .user-info {
        flex: 1;

        .username {
          font-size: 16px;
          font-weight: 600;
          color: #1d1d1f;
          margin-bottom: 3px;
          display: flex;
          align-items: center;
          gap: 9px;

          .anonymous-tag {
            font-size: 12px;
            color: #ff9500;
            background: rgba(255, 149, 0, 0.1);
            padding: 2px 9px;
            border-radius: 12px;
            font-weight: 400;
          }
        }

        .post-meta {
          font-size: 13px;
          color: #86868b;
          display: flex;
          align-items: center;
          gap: 5px;

          .separator {
            margin: 0 2px;
          }

          .status-published {
            color: #34c759;
          }

          .status-pending {
            color: #ff9500;
          }

          .status-hidden {
            color: #ff3b30;
          }

          .pinned {
            color: #ff3b30;
            font-weight: 500;
          }
        }
      }
    }

    .post-images {
      margin-bottom: 18px;
      padding: 0 18px;

      .post-carousel {
        border-radius: 9px;
        overflow: hidden;

        .image-slide {
          .post-image {
            width: 100%;
            height: auto;
            min-height: 200px;
            object-fit: cover;
          }
        }
      }
    }

    .post-title {
      padding: 9px 18px;
      font-size: 19px;
      font-weight: 700;
      color: #1d1d1f;
      line-height: 1.4;
      background: white;
      margin-bottom: 9px;
    }

    .post-text {
      padding: 0 18px;
      font-size: 16px;
      line-height: 1.6;
      color: #1d1d1f;
      white-space: pre-wrap;
      background: white;
      margin-bottom: 14px;
    }

    .post-tags {
      padding: 0 18px;
      background: white;
      margin-bottom: 18px;

      .tag {
        display: inline-block;
        font-size: 15px;
        color: #007aff;
        padding: 2px 5px;
        margin-right: 9px;
        margin-bottom: 7px;
        cursor: pointer;
        text-decoration: none;
        font-weight: 500;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .post-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-top: 1px solid #f2f2f7;
      background: white;

      .action-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #86868b;
        font-size: 13px;
        cursor: pointer;

        .action-icon {
          font-size: 17px;
        }

        .action-count,
        .action-text {
          font-size: 13px;
        }

        &:hover {
          color: #007aff;
        }
      }
    }
  }
}

.comments-section-phone {
  .comments-divider {
    height: 8px;
    background: #f2f2f7;
  }

  .comments-header-phone {
    padding: 18px;
    background: white;
    border-bottom: 1px solid #f2f2f7;

    .comments-title {
      font-size: 17px;
      font-weight: 600;
      color: #1d1d1f;
    }
  }

  .comments-list-phone {
    background: #f2f2f7;

    .comment-item-phone {
      background: white;
      margin-bottom: 9px;

      .main-comment-phone {
        display: flex;
        padding: 18px;
        gap: 14px;

        .comment-avatar {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          object-fit: cover;
        }

        .comment-content-phone {
          flex: 1;

          .comment-header-phone {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;

            .comment-username {
              font-size: 16px;
              font-weight: 600;
              color: #1d1d1f;
              display: flex;
              align-items: center;
              gap: 7px;

              .author-tag {
                font-size: 11px;
                color: #ff3b30;
                background: rgba(255, 59, 48, 0.1);
                padding: 1px 7px;
                border-radius: 9px;
                font-weight: 400;
              }
            }

            .comment-time-phone {
              font-size: 13px;
              color: #86868b;
            }
          }

          .comment-text-phone {
            font-size: 16px;
            line-height: 1.5;
            color: #1d1d1f;
            margin-bottom: 14px;
            word-break: break-word;
          }

          .comment-images-phone {
            display: flex;
            gap: 9px;
            margin-bottom: 14px;

            .comment-image-small {
              border-radius: 9px;
              object-fit: cover;
              width: 65px !important;
              height: 65px !important;
            }
          }

          .comment-actions-phone {
            display: flex;
            align-items: center;
            gap: 18px;

            .like-action {
              display: flex;
              align-items: center;
              gap: 5px;
              font-size: 13px;
              color: #86868b;
              cursor: pointer;

              &.liked {
                color: #ff3b30;
              }
            }

            .reply-btn-phone {
              padding: 0;
              font-size: 13px;
              color: #007aff;
              border: none;
              box-shadow: none;
              background: none;
            }
          }
        }
      }

      .replies-phone {
        background: #f8f9fa;
        border-top: 1px solid #f2f2f7;
        padding: 11px 18px 11px 67px;

        .reply-item-phone {
          display: flex;
          gap: 11px;
          padding: 9px 0;

          .reply-avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            object-fit: cover;
          }

          .reply-content-phone {
            flex: 1;

            .reply-header-phone {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 3px;

              .reply-username {
                font-size: 14px;
                font-weight: 500;
                color: #1d1d1f;
                display: flex;
                align-items: center;
                gap: 3px;

                .author-tag {
                  font-size: 9px;
                  color: #ff3b30;
                  background: rgba(255, 59, 48, 0.1);
                  padding: 1px 3px;
                  border-radius: 4px;
                  font-weight: 400;
                }
              }

              .reply-time-phone {
                font-size: 11px;
                color: #86868b;
              }
            }

            .reply-text-phone {
              font-size: 14px;
              line-height: 1.3;
              color: #1d1d1f;
              margin-bottom: 7px;
              word-break: break-word;

              .reply-target {
                color: #86868b;
                font-size: 13px;

                .target-username {
                  color: #007aff;
                  font-weight: 500;
                }
              }
            }

            .reply-actions-phone {
              .like-action {
                display: flex;
                align-items: center;
                gap: 2px;
                font-size: 11px;
                color: #86868b;
                cursor: pointer;

                .anticon {
                  font-size: 11px;
                }

                &.liked {
                  color: #ff3b30;
                }
              }
            }
          }
        }
      }
    }

    .empty-comments-phone {
      background: white;
      padding: 45px 18px;
      text-align: center;
      color: #86868b;
      margin-bottom: 9px;

      .empty-text {
        font-size: 16px;
      }
    }

    .load-more-phone {
      background: white;
      padding: 18px;
      margin-bottom: 9px;
    }
  }
}

// 滚动条样式
.phone-content::-webkit-scrollbar {
  width: 2px;
}

.phone-content::-webkit-scrollbar-track {
  background: transparent;
}

.phone-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}

// 轮播图样式
:deep(.post-carousel.ant-carousel) {
  .slick-dots {
    bottom: 12px;
  }

  .slick-dots li button {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .slick-dots li.slick-active button {
    background: #007aff;
  }

  .slick-slide {
    text-align: center;
  }
}

// 确保帖子图片100%宽度
:deep(.post-images .ant-image) {
  width: 100% !important;

  img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}

:deep(.post-images .ant-image-img) {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

// 评论区图片保持固定尺寸
:deep(.comment-images-phone .ant-image) {
  width: 65px !important;
  height: 65px !important;

  img {
    width: 65px !important;
    height: 65px !important;
    object-fit: cover;
  }
}

:deep(.comment-images-phone .ant-image-img) {
  width: 65px !important;
  height: 65px !important;
  object-fit: cover;
}
</style> 